<template>
  <div>
    <el-card>
      <el-form :model="formInline">
  <el-form-item label="关键字">
    <el-input v-model="formInline.keyword" placeholder="根据文章标题搜索"></el-input>
  </el-form-item>
  <el-form-item label="状态">
    <el-select v-model="formInline.state" placeholder="请选择">
      <el-option label="启用" value="shanghai"></el-option>
      <el-option label="禁用" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
      <el-button plain @click='clear'>清除</el-button>
    <el-button type="primary" @click='search'>搜索</el-button>
  </el-form-item>
  <el-form-item style='display:inline-block;margin-right:0px'>
  <el-button type="success" icon="el-icon-edit" @click='adddialog'>新增技巧</el-button>
  </el-form-item>

   <el-alert
    :title="`数据一共${page.counts}条`"
    :closable="false"
    style="margin-bottom:10px"
    type="info"
    show-icon>
  </el-alert>
</el-form>
<!-- 表格 -->
 <el-table
      :data="gettablelist"

      style="width: 100%">
      <el-table-column
       type="index"
        label="序号"
        width="90">
      </el-table-column>
      <el-table-column
        prop="title"
        label="文章标题"
        width="350">
      </el-table-column>
      <el-table-column
      width="100"
        prop="visits"
        label="阅读数">
      </el-table-column>
      <el-table-column
        prop="username"
        width="100"
        label="录入人">
      </el-table-column>
       <el-table-column
        prop="createTime"
         width="200"
        label="录入时间">
      </el-table-column>
       <el-table-column
        prop="state"
         width="90"
        label="状态">
        <template slot-scope="{row}">
          <span>{{row.state===1 ?'已启用':'已禁用'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
        <template slot-scope="{row}" >
        <el-button type="text" @click='preview(row)'>预览</el-button>
         <el-button type="text" @click="handleState(row)">
          <span v-if="row.state == 1">启用</span>
          <span v-else>禁用</span>
         </el-button>
         <el-button type="text" :disabled='row.state == 1' v-if="row.status != 'delete'" @click="revise(row)">修改</el-button>
         <el-button type="text" :disabled='row.state == 1' v-if="row.status != 'delete'" @click='remove(row)'>删除</el-button>
         </template>
      </el-table-column>
    </el-table>
    <!-- 修改弹层 -->
    <el-dialog
  title="新增文章"
  :visible.sync="dialogVisible">
  <el-form  :model="ArticleForm" :rules="rules" ref="ruleForm" >
    <!-- 文章标题 -->
  <el-form-item label="文章标题" prop="title" placeholder="请输入文章名称">
    <el-input v-model="ArticleForm.title"></el-input>
  </el-form-item>
  <!-- 文章内容 -->
  <el-form-item label="活动名称" placeholder="请输入活动名称"  prop="articleBody">
  <editor-bar :catchData="catchData" :content="ArticleForm.articleBody" style="width:500px"></editor-bar>
 </el-form-item>

<!-- 视频地址 -->
  <el-form-item label="视频地址 " placeholder="请输入视频地址"  prop="videoURL">
    <el-input v-model="ArticleForm.videoURL" ></el-input>
  </el-form-item>
  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="BtnOk">确 定</el-button>
  </span>
</el-dialog>

<!-- 分页 -->

<el-pagination
  background
  layout="prev, pager, next,total"
  :page-size='page.pagesize'
  :current-page="page.page"
  @current-change='changePage'
  :total="page.counts">
</el-pagination>

<!-- 预览 -->
    <el-dialog title="预览文章" :visible.sync="showyulanDialog">
      <div>
        <h2>{{ list.title}}</h2>
      </div>
      <div class="ylbox">
        <span> {{ list.createTime }} </span>
        <span>超级管理员</span>
        <span class="el-icon-view"></span>
        <span> {{   list.visits }} </span>
      </div>
      <span v-html="list.articleBody"></span>
    </el-dialog>

    <!-- 修改 -->
     <el-dialog
  title="修改文章"
  :visible.sync="show">
  <el-form  :model="ArticleForm" :rules="rules" ref="ruleForm" >
    <!-- 文章标题 -->
  <el-form-item label="文章标题" prop="title" placeholder="请输入文章名称">
    <el-input v-model="ArticleForm.title"></el-input>
  </el-form-item>
  <!-- 文章内容 -->
  <el-form-item label="活动名称" placeholder="请输入活动名称"  prop="articleBody">
  <editor-bar :catchData="catchData" :content="ArticleForm.articleBody" style="width:500px"></editor-bar>
 </el-form-item>

<!-- 视频地址 -->
  <el-form-item label="视频地址 " placeholder="请输入视频地址"  prop="videoURL">
    <el-input v-model="ArticleForm.videoURL" ></el-input>
  </el-form-item>
  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="show = false">取 消</el-button>
    <el-button type="primary" @click="queding">确 定</el-button>
  </span>
</el-dialog>
</el-card>
  </div>
</template>

<script>
import { list, remove, changeState, add, detail } from '@/api/hmmm/articles.js'
import EditorBar from '@/components/editoritem'

export default {
  name: 'AC',
  data () {
    return {
      gettablelist: [],
      list: [],
      page: {
        page: 1, // 当前页数
        pagesize: 10, // 每页条数
        // total: 0, // 总数
        counts: 0
      },
      ArticleForm: {
        title: '',
        articleBody: '',
        videoURL: '',
        id: null
      },
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ],
        videoURL: [
          { required: true, message: '请输入视频地址', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      // 预览
      showyulanDialog: false,
      // 修改
      show: false,
      formInline: {
        keyword: '',
        state: null,
        page: 1,
        pagesize: 10
      }
    }
  },
  created () {
    this.getarticle()
  },
  methods: {
    // 4.搜索
    async search () {
      const { data } = await list(this.formInline)
      this.page.counts = data.counts
      this.gettablelist = data.items
    },
    // 5. 清除
    clear () {
      this.formInline = {
        keyword: '',
        state: ''
      }
    },
    // 1. 获取数据渲染表格列表
    async getarticle () {
      // await list()
      // const res = await list()
      // console.log(res)
      const { data } = await list(this.page)
      // console.log(data.counts)
      console.log(data)
      this.gettablelist = data.items
      this.page.counts = data.counts
      // this.gettablelist = data.items
    },
    changePage (newPage) {
      console.log(newPage)
      this.page.page = newPage
      this.getarticle()
    },
    // 2.删除列表
    async remove (id) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示')
        await remove(id)
        this.getarticle()
      } catch (e) {
        console.log(e)
      }
    },
    // 修改状态
    async handleState (data) {
      console.log(data)
      try {
        await changeState({
          id: data.id,
          state: data.state === 1 ? 0 : 1
        })
        this.getarticle()
        this.$message.success('操作成功')
      } catch (e) {
        this.$message.e('操作失败')
      }
    },
    // 修改信息
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 富文本开始
    catchData (e) {
      this.ArticleForm.articleBody = e
      console.log(this.ArticleForm.articleBody)
      console.log('e=====?>', e)
    },
    // 富文本中的内容
    editorContent (e) {
      console.log('e=====?>', e)
    },

    // 点击出现弹层
    async adddialog () {
      this.dialogVisible = true
    },
    // 新增文章确定完成
    async BtnOk () {
      this.dialogVisible = false
      await add(this.ArticleForm)
      this.getarticle()
      this.$message({
        message: '操作成功',
        type: 'success'
      })
    },

    // 预览弹层
    async preview (id) {
      // console.log(this.gettablelist)
      const res = await detail(id)
      console.log(res)
      this.list = res.data
      this.showyulanDialog = true
    },

    // 修改弹层
    async revise (id) {
      // console.log('11')
      this.show = true
      const lists = await detail(id)
      console.log(lists)
      this.ArticleForm = lists.data
      this.getarticle()
    },
    async queding () {
      this.show = false
      this.getarticle()
      await add(this.ArticleForm)
      this.$message({
        message: '修改成功',
        type: 'success'
      })
    }

  },
  computed: {
    status () {
      return this.status
    }
  },
  components: { EditorBar }
  // 富文本结束

}
</script>

<style scoped lang='less'>
.el-dialog{
  width:100%;
  .el-form {
    margin-left: 20px;
  }
  .el-form-item {
    width:90%;
   .el-input {
       width:500px
   }
  }
}
</style>
